<template>
  <view class="pay-success flex-row flex-center" :class="{ show: modelValue }">
    <view class="flex-column flex-center container" :class="{ show: modelValue }">
      <view class="relative">
        <view class="decorate" />
        <view class="content relative flex-column align-center justify-between">
          <text class="title">购买成功</text>

          <view v-if="item.type === 1" class="flex-column flex-center">
            <text class="text-28 color-t2">到账星币</text>
            <view class="flex-row flex-center margin-top-10">
              <image :src="item.img" class="purse-icon block" />
              <text class="text-52 color-pink text-bold">{{ item.coin + (item.zengsong || 0) }}</text>
            </view>
            <view v-if="item.zengsong" class="flex-row flex-center">
              <text class="text-22 more margin-right-10">多送{{ item.zengsong }}星币</text>
              <text class="text-22 more">价值{{ item.zengsongmoney }}元</text>
            </view>
          </view>

          <view v-else class="flex-column flex-center">
            <text class="text-28 color-t2">已开通会员</text>
            <text class="text-52 color-primary text-bold margin-top-20">{{ item.name }}</text>
            <text class="text-22 more margin-top-30">{{ item.title }}</text>
          </view>

          <by-button
            width="356rpx"
            height="78rpx"
            font-size="32rpx"
            :font-color="colors.colorWhite"
            background="linear-gradient( 178deg, #EB64D5 0%, #FF306E 64%)"
            text="好 的"
            @click="close"
          />
        </view>
      </view>

      <image src="/static/close.png" class="close block margin-top-30" @click="close" />
    </view>
  </view>
</template>

<script setup lang="ts">
import colors from '@/style/style.module.scss'
import type { AnyObject } from '@/common/types'

interface IProps{
  modelValue: boolean
  item: AnyObject
}

const $emit = defineEmits(['update:modelValue', 'close'])

withDefaults(defineProps<IProps>(), {
  modelValue: false,
  item: () => ({})
})

function close() {
  $emit('update:modelValue', false)
  $emit('close')
}

</script>

<style scoped lang="scss">
.pay-success{
  @include position(fixed, 0, 0, 0, 0, 999);
  background: rgba(0,0,0,0.5);
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-in-out;

  &.show{
    opacity: 1;
    visibility: visible;
  }

  .container{
    transform: scale(.7);
    transition: all .3s ease-in-out;

    &.show{
      transform: scale(1);
    }

  }

  .content{
    width: 570rpx;
    height: 570rpx;
    background: linear-gradient( 180deg, #DFE1FF 0%, #FDFEFF 45%, #DDEAF9 100%);
    border-radius: 32rpx;
    padding-top: 86rpx;
    padding-bottom: 70rpx;

    .title{
      font-size: 54rpx;
      line-height: 76rpx;
      color: #9207FF;
    }

    .purse-icon{
      width: 90rpx;
      height: 90rpx;
    }

    .more{
      color: #595959;
    }

  }

  .decorate{
    width: 570rpx;
    height: 574rpx;
    background: rgba(255,255,255,0.2);
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.66);
    @include position(absolute, 0, 0, $z-index: 1);
    transform: rotate(5.4deg);
  }

  .close{
    width: 64rpx;
    height: 64rpx;
  }

}
</style>
